<template>
  <div>
    <h2 v-if="orderNumber">支付成功！</h2>
    <h2 v-else style="color: red;">支付失败！</h2>
    <router-link :to="{name: 'home'}">返回首页</router-link>
  </div>
</template>

<script>
export default {
  name: 'result',
  data () {
    return {
      orderNumber: null,
      timer: null,
      time: 0,
      finish: false
    }
  },
  methods: {
    getStatus (data) {
      if (data !== 2) {
        clearInterval(this.timer)
        this.finish = true
      }
    },
    ajaxRequest (callback) {
      let now = new Date().valueOf()
      if (now - this.time >= 1000) {
        clearInterval(this.timer)
        this.finallyRequest()
      }
      this.$ajax.get('/wx/recharge/order/status/query?orderNumber=' + this.orderNumber)
        .then(res => {
          callback(res.data.data)
        })
    },
    finallyRequest () {
      if (this.finish) {
        return
      }
      this.$ajax.get('/wx/recharge/order/status/query?orderNumber=' + this.orderNumber + '&forceRefresh=true')
        .then(res => {
        })
    }
  },
  created () {
    this.orderNumber = this.$route.query.orderNumber
    if (this.orderNumber) {
      this.time = new Date().valueOf()
      this.timer = setInterval(this.ajaxRequest(this.getStatus), 200)
    }
  }
}
</script>

<style scoped>

</style>
